<template>
  <div class="maincontent">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <div style="padding:4px;">
          <el-form
            :inline="true"
            label-position="left"
            :model="formData"
            ref="formData"
            label-width="80px"
            :rules="formDataRules"
          >
            <div class="maintitle" style="margin-top:40px;">申请规划设计</div>
            <div class="formcontent">
              <el-form-item label="土地请查费：" prop="landCheckFee" label-width="170px">
                <el-input
                  style="width:200px;"
                  v-model="formData.landCheckFee"
                  :min="0"
                  type="number"
                  :readonly="isCurrentProcess"
                  placeholder="请填入"
                >
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="可行性研究费：" prop="feasibilityStudyFee" label-width="170px">
                <el-input
                  style="width:200px;"
                  v-model="formData.feasibilityStudyFee"
                  :min="0"
                  type="number"
                  :readonly="isCurrentProcess"
                  placeholder="请填入"
                >
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="项目踏勘费：" prop="projectSurveyFee" label-width="170px">
                <el-input
                  style="width:200px;"
                  v-model="formData.projectSurveyFee"
                  :min="0"
                  type="number"
                  :readonly="isCurrentProcess"
                  placeholder="请填入"
                >
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="规划设计与预算编制费：" prop="designBudgetFee" label-width="170px">
                <el-input
                  style="width:200px;"
                  v-model="formData.designBudgetFee"
                  :min="0"
                  type="number"
                  :readonly="isCurrentProcess"
                  placeholder="请填入"
                >
                  <i slot="suffix">万元</i>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="规划设计申请书：" label-width="170px" prop="planningDesignFileId">
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :file-list="fileList"
                  :on-success="uploadFileSuccess"
                  :limit="1"
                  accept=".pdf"
                  :disabled="isCurrentProcess"
                  v-if="!isCurrentProcess"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <div class="viewDocment" v-if="isCurrentProcess">
                  <seeFujian
                    v-if="formData.planningDesignFile"
                    @openPdf="seePdf"
                    :file-name="formData.planningDesignFile | backFileName"
                    :file-url="formData.planningDesignFile.filePath"
                  />
                  <!-- <span><i class="el-icon-document"/>{{formData.planningDesignFile | backFileName}}</span>
                  <a target="_blank" style="color: rgb(64, 158, 255);margin-left:5px" @click="seePdf(formData.planningDesignFile.filePath,formData.planningDesignFile.fileName)">查看</a>-->
                </div>
              </el-form-item>
            </div>
          </el-form>
          <div style="margin-top:40px;">
            <el-button type="primary" @click="onSubmit" v-if="!isCurrentProcess">提交</el-button>
            <el-button @click="$router.push('/projectManagement/planningStage/dealwith')">返回</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRegPlanningDesignDetail,
  saveRegPlanningByCountry,
  examineOpinionList
} from "@/api/plannDesign/application";
import { getCheckData } from "@/api/common.js";
import { getInfo } from "@/api/user";
import config from "@/config/index.js";
import seeFujian from "@/components/seeFujian";
export default {
  components: {
    seeFujian
  },
  data() {
    return {
      pdfUrl: "",
      pdfFlag: false,
      pdfName: "",
      projectId: localStorage.getItem("projectId") * 1,
      baseUrl: config.baseUrl,
      uploadUrl: config.uploadUrl, // 上传通用接口
      user: {}, // 当前登录用户
      formData: {
        landCheckFee: "",
        feasibilityStudyFee: "",
        projectSurveyFee: "",
        designBudgetFee: "",
        planningDesignFileId: ""
      },
      activeName: "first",
      fileList: [],
      formDataRules: {
        landCheckFee: [
          {
            require: true,
            validator: (rule, value, callback) => {
              const v = Number(value);
              if (isNaN(v) || value == "") {
                callback(new Error("请输入正确费用"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        feasibilityStudyFee: [
          {
            require: true,
            validator: (rule, value, callback) => {
              const v = Number(value);
              if (isNaN(v) || value == "") {
                callback(new Error("请输入正确费用"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        projectSurveyFee: [
          {
            require: true,
            validator: (rule, value, callback) => {
              const v = Number(value);
              if (isNaN(v) || value == "") {
                callback(new Error("请输入正确费用"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        designBudgetFee: [
          {
            require: true,
            validator: (rule, value, callback) => {
              const v = Number(value);
              if (isNaN(v) || value == "") {
                callback(new Error("请输入正确费用"));
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        planningDesignFileId: [
          {
            require: true,
            validator: (rule, value, callback) => {
              const v = Number(value);
              console.log(v);
              if (isNaN(v) || value == "") {
                callback(new Error("请上传文件"));
              }
              callback();
            },
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "APPLY_FOR_PLANNING_AND_DESIGN_DIST_DESIGN";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  filters: {
    backFileName: function(data) {
      if (data) {
        return data.fileName;
      } else {
        return "";
      }
    },
    backFilePath: function(data, baseUrl) {
      if (data) {
        return baseUrl + data.filePath;
      } else {
        return "#";
      }
    }
  },
  mounted() {
    this._initData();
  },
  methods: {
    //查看当前PDF
    seePdf(url, name) {
      this.pdfFlag = true;
      this.pdfUrl = url;
      this.pdfName = name;
    },
    // 初始化数据
    _initData() {
      this._getHistoryData();
    },
    //提交申请
    onSubmit() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          const data = Object.assign(this.formData, {
            projectId: this.projectId
          });
          saveRegPlanningByCountry(data).then(res => {
            loading.close();
            this.$message.success("操作成功！");
            this.$router.push("/projectManagement/planningStage/dealwith");
          });
        }
      });
    },
    // 历史数据
    _getHistoryData() {
      getRegPlanningDesignDetail(this.projectId).then(res => {
        if (res.data.planningDesignApply) {
          this.formData = res.data.planningDesignApply;
        }
      });
    },
    //文件上传
    uploadFileSuccess: function(res, file, fileList) {
      this.formData.planningDesignFileId = res.data.id;
      this.$refs["formData"].validate();
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-input__suffix-inner {
  i {
    font-style: normal;
  }
}
</style>
<style lang="scss" scoped>
.maincontent {
  margin: 10px;
  box-sizing: border-box;
  background: #ffffff;
  padding: 20px;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .investmentmsg {
    .totalInvestment {
      width: 250px;
      height: 160px;
      margin-right: 30px;
      float: left;
      position: relative;
      margin-top: 15px;
      .contentbox {
        width: 242px;
        height: 100%;
        background: #f6a924;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-left: 30px;
          padding-top: 30px;
          color: #ffffff;
        }
        .value {
          font-size: 40px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 56px;
          margin-top: 14px;
          color: #ffffff;
          text-align: center;
          span {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 18px;
          }
        }
      }
      .youjiantou {
        position: absolute;
        width: 0;
        height: 0;
        border-width: 30px 0 30px 30px;
        border-style: solid;
        border-color: transparent transparent transparent #f6a924;
        right: 0;
        top: 50%;
        margin-top: -30px;
      }
    }
    .childInvestment {
      width: 480px;
      height: 160px;
      float: left;
      margin-top: 15px;
      .leftbox {
        width: 240px;
        height: 160px;
        float: left;
        border-radius: 4px;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          margin-left: 30px;
          padding-top: 30px;
          color: #ffffff;
        }
        .value {
          font-size: 40px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 56px;
          margin-top: 14px;
          color: #ffffff;
          text-align: center;
          span {
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 18px;
          }
        }
      }
      .rightbox {
        width: 240px;
        height: 160px;
        float: left;
        padding-top: 20px;
        padding-left: 30px;
        background: #f3f6f8;
        border-radius: 4px;
        .item-content {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 18px;
          color: #969899;
          margin-bottom: 7px;
        }
      }
    }
  }

  .formcontent {
    margin-top: 30px;
    .secondtitle {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #666666;
      span {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;
        margin-right: 30px;
        color: #a6a6a6;
      }
    }
    .purchaseExpense {
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #666666;
      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
        margin-right: 60px;
      }
    }
    .allInvestment {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      line-height: 20px;
      margin-top: 20px;
      color: #333333;
      span {
        font-weight: 500;
      }
    }
  }
  .construction {
    padding-top: 10px;
    .item1 {
      margin-top: 20px;
      .title {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #666666;
        float: left;
        width: 160px;
        text-align: right;
      }
      .value {
        float: left;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 20px;
        color: #a6a6a6;
      }
    }
  }
}
</style>
